<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no">
<link rel="stylesheet" href="http://cmp/css/cmp.css"/>
<link rel="stylesheet" href="http://commons.v5.cmp/cmp-resources/M1H5.s3css"/>
<link rel="stylesheet" href="${data:dependencies.cmp}/css/cmp-listView.css">

<style>


    .document_title_switch .cmp-switch-handle:before

</style>
</head>
<body class="cmp-fullscreen">

<header class="cmp-bar cmp-bar-nav">
<a class="cmp-action-back cmp-icon cmp-icon-left-nav cmp-pull-left"></a>
<a href="person_handling.html" class="cmp-icon  cmp-pull-right submit_text">处理人</a>
<h1 class="cmp-title">
    <div class="cmp-switch cmp-switch-blue document_title_switch ">
        <div class="cmp-switch-handle"></div>
    </div>
</h1>


</header>

<div class="cmp-content  position_relative ">

<div class="cmp-segmented_title_content">
        <ul class="cmp-table-view m1-details-title">
            <li class="cmp-list-cell "  >
                <div class="cmp-list-cell-info">
                    <span class="cmp-pull-left list_title_name" >
                        <!--<span class="cmp-icon iconfont see-icon-v5-common-important-2"></span>-->
                        <span class="cmp-icon iconfont see-icon-v5-common-important-1"></span>
                        管理员管理员管理员管理员管理
                    </span>
                    <span class="cmp-ellipsis   cmp-pull-right list_title_time  ">
                        <span class="cmp-icon iconfont icon-yijingbiaoqi"></span>
                        <!--<span class="cmp-icon-synergy-list flag2 flag_mark   "></span>-->
                    </span>
                    <h5 class="cmp-ellipsis list_cont_info" >

                        <span class="cmp-pull-left">
                           <span>李鸿章</span>
                            <span>07-22 09:30</span>
                        </span>
                        <span class="cmp-pull-right">
                            <a class="href_show" href="#middle">
                                <span class="cmp-icon iconfont see-icon-accessory"></span>
                                <!--<span class="cmp-icon-synergy-list accessory1"></span>-->
                                <span>2</span>
                            </a>

                        </span>
                    </h5>
                </div>
            </li>
        </ul>
</div>

<div  class="cmp-control-content cmp-active">
    <div id="contentView" class="cmp-scroll-wrapper">
        <div class="cmp-scroll content_details">
            <!--附件模块-->
            <div id="middle" class="display_none">
                <ul class="cmp-list-content cmp-accessory-content margin_top-1">
                    <li class="cmp-list-cell ">
                        <div class="cmp-list-accessory">
                            <div class="cmp-list-cell-img cmp-radio cmp-left">
                                <img class=" cmp-pull-left img_setting" src="img/shuijiao.jpg">
                            </div>
                            <div class="cmp-list-cell-info">
                                <span class="cmp-ellipsis cmp-pull-left list_title_name">管理员管理员管理员管理员</span>
                                <h6 class="cmp-ellipsis list_cont_info">2KB</h6>
                            </div>
                            <div class="cmp-list-navigate">
                                <span class="cmp-icon iconfont icon-daoruxiazai download"></span>
                            </div>
                            <span class="cmp-icon iconfont icon-roundclosefill icon_delete"></span>
                            <i class="clear_left"></i>
                        </div>
                    </li>
                    <li class="cmp-list-cell">
                        <div class="cmp-list-accessory">
                            <div class="cmp-list-cell-img cmp-radio cmp-left">
                                <img class=" cmp-pull-left img_setting" src="img/shuijiao.jpg">
                            </div>
                            <div class="cmp-list-cell-info">
                                <span class="cmp-ellipsis cmp-pull-left list_title_name">管理员管理员管理员管理员</span>
                                <h6 class="cmp-ellipsis list_cont_info">2KB</h6>
                            </div>
                            <div class="cmp-list-navigate">
                                <span class="cmp-icon     iconfont icon-daoruxiazai download"></span>
                            </div>
                            <span class="cmp-icon iconfont icon-roundclosefill icon_delete"></span>
                            <i class="clear_left"></i>
                        </div>
                    </li>
                </ul>
            </div>

            <!--一级科目-->
            <ul class="cmp-table-view ">
                <li class="cmp-table-view-cell">
                    <span>一级科目</span>
                    <span class=" cmp-pull-right">日常报销</span>
                </li>
                <li class="cmp-table-view-cell">
                    <span>报销部门</span>
                    <span class=" cmp-pull-right">用户体验部</span>
                </li>
                <li class="cmp-table-view-cell">
                    <span>报销项目</span>
                    <span class=" cmp-pull-right">公司其他</span>
                </li>
            </ul>
            <!--二级科目-->
            <ul class="cmp-table-view">
                <li class="cmp-table-view-cell">
                    <span>二级科目</span>
                    <span class=" cmp-pull-right">日常报销</span>
                </li>
                <li class="cmp-table-view-cell">
                    <span>报销日期</span>
                    <span class=" cmp-pull-right">2015-6-30</span>
                </li>
                <li class="cmp-table-view-cell">
                    <span>费用年份</span>
                    <span class=" cmp-pull-right">2015</span>
                </li>
            </ul>
            <!--报销金额-->
            <ul class="cmp-table-view">
                <li class="cmp-table-view-cell">
                    <span>报销金额</span>
                    <span class=" cmp-pull-right">400</span>
                </li>
            </ul>
            <!--审批意见-->
            <ul class="cmp-table-view">
                <li class="cmp-table-view-cell">
                    <span>审批意见</span>
                    <textarea class="cmp-pull-right width_69" name="text" id="" cols="3" rows="3"></textarea>
                </li>
            </ul>
            <!--附言-->
            <ul class="cmp-table-view">
                <li class="cmp-table-view-cell">
                    <span>附言：</span>
                    <p class="cmp-h5">请各位提前做好准备。</p>
                </li>
            </ul>



        </div>
    </div>
</div>

    <!--页签容器-->
    <div class="fold_content">
        <div id="segmentedControl"   class="cmp-segmented-control cmp-segmented-control-inverted border_bottom">
            <a class="cmp-control-item cmp-active" href="#item1">
                <span>全部</span>
                <span class="sub">1111</span>
            </a>
            <a class="cmp-control-item" href="#item2">
                <span>赞</span>
                <span class="sub">22</span>
            </a>
            <a class="cmp-control-item" href="#item3">
                <span>同意</span>
                <span class="sub">33</span>
            </a>
            <a class="cmp-control-item" href="#item4">
                <span>不同意</span>
                <span class="sub">55</span>
            </a>
        </div>
        <div id="item1" class="cmp-control-content cmp-active">
            <div id="all" class="cmp-scroll-wrapper">
                <div class="cmp-scroll">
                    <ul class="cmp-list-content cmp-list-opinion-reply m1-details-content margin_top-1">
                        <li class="cmp-list-cell">
                            <div class="cmp-list-cell-img cmp-radio cmp-left">
                                <img class=" cmp-pull-left img_setting" src="http://commons.v5.cmp/cmp-resources/m1_h5/img/document_type@1x.png">
                            </div>
                            <div class="cmp-list-cell-info"  >
                                <span class="cmp-ellipsis cmp-pull-left list_title_name width_85">
                                    <span>孙晓</span><span class="stat">已阅</span>
                                </span>
                                <span class="cmp-icon iconfont icon-commentfill cmp-pull-right"></span>
                                <h6 class="list_cont_info">信息化推进办
                                    公室张彦合同付款信息化信息化推进办公室张彦合同付款信息
                                </h6>
                                <h6 class=" plaint">
                                    <span class="cmp-pull-left">2小时前</span>
                                </h6>
                            </div>
                            <!--回复容器-->
                            <div class="replay-content"  >
                                <div class="cmp-list-cell-info width_auto">
                                    <span class="cmp-ellipsis cmp-pull-left list_title_name">孙晓</span>
                                    <h5 class="list_cont_info">信息化推进办</h5>
                                    <h6 class=" plaint">
                                        <span>2015-05-06</span>
                                        <span class="cmp-h6">来自iphone10移动客服端</span>
                                    </h6>
                                </div>
                                <div class="clear_left"></div>
                            </div>

                        </li>
                        <li class="cmp-list-cell">
                            <div class="cmp-list-cell-img cmp-radio cmp-left">
                                <img class=" cmp-pull-left img_setting" src="M1H5Mobilize/img/xiangji.png">
                            </div>
                            <div class="cmp-list-cell-info"  >
                                <span class="cmp-ellipsis cmp-pull-left list_title_name width_90">
                                    <span>孙晓</span><span class="stat">已阅</span>
                                    <span class="cmp-pull-right cmp-h5">32323</span>
                                    <span class="cmp-icon iconfont icon-appreciatefill cmp-pull-right cmp-active"></span>

                                </span>
                                <span class="cmp-icon iconfont icon-commentfill cmp-pull-right "></span>
                                <h6 class="list_cont_info">
                                    <span class="cmp-icon iconfont icon-appreciatefill cmp-active"  ></span>
                                    现在新闻的模块可以评论了
                                </h6>
                                <h6 class=" plaint">
                                    <span class="cmp-pull-left">2小时前</span>
                                </h6>
                            </div>
                        </li>

                    </ul>

                </div>
            </div>

        </div>
        <div id="item2" class="cmp-control-content">
            222
        </div>
        <div id="item3" class="cmp-control-content">
            333
        </div>
        <div id="item4" class="cmp-control-content">
            444
        </div>
    </div>


</div>
<footer class="cmp-bar cmp-bar-footer footer_custom">
    <button type="button" class="cmp-btn cmp-btn-primary cmp-btn-block handler ">处理</button>
    <button class="cmp-btn cmp-btn-primary handler_more">
        <span class="cmp-icon iconfont see-see-icon-more"></span>
    </button>
</footer>


<s3:data name='cordova' />
<script src="http://cmp/js/cmp.js"></script>
    
<script src="${data:dependencies.cmp}/js/cmp-imgCache.js"></script>
<script src="${data:dependencies.cmp}/js/cmp-listView.js"></script>
<script>

cmp.ready(function(){




//针对切换按钮国际化
SetSwitchTxt('zhengweng','liucheng');
function SetSwitchTxt(text1,text2){
var text=[text1,text2];
SetCss('.document_title_switch .cmp-switch-handle:before{content:\''+text[0]+'\';font-size:'+12+'px;'+';right:0;}');
SetCss('.document_title_switch:before{content:\''+text[1]+'\';font-size:'+12+'px;'+';right:'+3+'px;'+'}');
//切换的时候
SetCss('.document_title_switch.cmp-active:before{content:\''+text[0]+'\';font-size:'+12+'px;'+';right:0;left:0;width:'+80+"px;"+';}');
SetCss('.document_title_switch.cmp-active .cmp-switch-handle:before{content:\''+text[1]+'\';font-size:'+12+'px;'+';right:0;left:0;}');
    function SetCss(t,s){
        s=document.createElement('style');
        s.innerText=t;
        document.body.appendChild(s);
    };
}


    cmp.listView("#contentView"); //滚动容器
    //初始化列表
//    点击附件按钮进行的显示与隐藏
    var href_show=document.querySelectorAll('.href_show');
    var contentView=document.getElementById('contentView');
    for(var i=0,len=href_show.length;i<len;i++){
        (function(index){
            href_show[index].addEventListener('click',function(){
                var thisId=this.href.toString().split('#')[1];
                var content= document.getElementById(thisId);
                 content.classList.contains('display_none')
                 ?content.classList.remove('display_none')
                 :content.classList.add('display_none');
                cmp.listView(contentView).refresh();
            })
        })(i);
    }

//    旗帜的点击事件
//    var flag_mark=document.querySelector('.flag_mark');
//        flag_mark.addEventListener('click',function(){
//            if(this.classList.contains('flag1')||this.classList.contains('cmp-active')){
//                this.classList.remove('cmp-active');
//                this.classList.add('flag2');
//                this.classList.remove('flag1');
//            }else{
//                this.classList.add('cmp-active');
//                this.classList.add('flag1');
//                this.classList.remove('flag2');
//            }
//        });
    cmp.listView('#all');

});


</script>
</body>
</html>
